<template>
<div>
  <div class="Pagination">
    <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
    <button v-if="startNumAndEndNum.start>1"  @click="$emit('getPageNo',1)">1</button>
    <button v-if="startNumAndEndNum.start>2">...</button>
    <button :class="{active:page==pageNo}" v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page>=startNumAndEndNum.start" @click="$emit('getPageNo',page)">{{page}}</button>
    <button v-if="startNumAndEndNum.end<totalPage-1">...</button>
    <button v-if="startNumAndEndNum.end<totalPage" @click="$emit('getPageNo',totalPage)">{{totalPage}}</button>
    <button @click="$emit('getPageNo',pageNo+1)"  :disabled="pageNo==totalPage">下一页</button>
    <span>共{{total}}条</span>
  </div>
<!--  <h2>当前页:{{pageNo}},多少页码:{{totalPage}},总数据{{total}},连续页数:{{continues}}</h2>-->
<!--  <h3>{{startNumAndEndNum}}</h3>-->
</div>
</template>

<script>
export default {
  name: "Pagination",
  props:['pageNo','pageSize','total','continues'],
  computed:{
    totalPage(){
      return Math.ceil(this.total/this.pageSize)//pageSize是一页多少条数据
    },
    startNumAndEndNum(){
      let {continues,pageNo,totalPage}=this//引用this里面的变量
      let start=0,end=0
      if(totalPage<continues){//当总页码数量少于连续页码数时
        pageNo=1
      end=this.totalPage
      }else {
        start = pageNo - parseInt(continues / 2)
        end = pageNo + parseInt(continues / 2)
        if (start < 1) {//起始页被减成负时
          start = 1
          end =continues
        }
      if(end>totalPage){//最后一个数大于总页数时
        end=totalPage
        start=totalPage-continues+1
      }
      }
      return{start,end}
    }
  }
}
</script>

<style scoped lang="less">
.active{
  cursor: not-allowed;
  background-color: #c81623 !important;
  color: #fff !important;
}
.Pagination{
  width: 1200px;
  height: 28px;
  margin: 0 auto 25px;
  text-align: center;
  button{
    background-color:rgb(244, 244, 245);
    color: #606266;
    height: 100%;
    padding:0 4px;
    margin: 0 5px;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 400;
    width: 27.5px;
  }
  button:first-child{
   width: 48px !important;
    &:extend(button);
  }
  button:nth-last-child(2){
    width: 48px !important;
    &:extend(button);
  }
  span{
    display: inline-block;
    color: grey;
    height: 28px;
    font-size: 14px;
    font-weight: 400;
  }
}
</style>
